<template>
  <div style="height: 650px;background-color: #F8F9FE;">
    <div style="width:400px;" class="fl">
      <div class="danyuan">
        <div :class="{clickDanyuan:changeDanyuan === index}" v-for="(item, index) in floordata" :key="'a' + index"
             class="fl text-center ml10" @click="clickDanyuan(index)">
          {{item.title}}
        </div>
      </div>
      <div class="lou mt5">
        <template v-if="floordata[danyuan].list!==undefined">
          <Row v-for="(item, index) in floordata[danyuan].list" :key="'a' + index"
               style="background-color: #fff; position: relative;min-height: 75px;"
               class="mt10">
            <div class="fl mr10 ceng">{{item.title}}</div>
            <div class="fl hulist">
              <template v-if="item.list!==undefined">
                <div :class="{clickHu:(changeHu_i ===index && changeHu_j === index1)}" class="fl mr5 hu"
                     v-for="(item1, index1) in item.list" :key="'b' + index1"
                     @click="clickHu(index, index1)">
                  {{item1.title}}
                </div>
              </template>
            </div>
          </Row>
        </template>
      </div>
    </div>
    <div class="fl info personlist" v-if="this.status===true">
      <Table border :loading="loading" :columns="columns" :data="datalist"></Table>
<!--      <div class="info_list_title">{{currentDanyuan}} 户信息</div>-->
<!--      <div class="info_list_content" v-if="this.currentHu!==''">-->
<!--        <div :class="{clickPerson:(changePerson === index)}" class="fl person mr10"-->
<!--             v-for="(item, index) in person"-->
<!--             :key="index" @click="clickPerson(item, index)">-->
<!--          {{item.name}} (户籍人口) <br>-->
<!--          {{item.cardno}}-->
<!--        </div>-->
<!--      </div>-->
      <div class="page_style">
        <div style="float: right; margin-left: 50px; height: 32px; line-height: 32px">共 {{ totalnum }} 条</div>
        <Page style="text-align: right" :total="totalnum" :current="currentPageNo" :page-size="currentPageSize"
              @on-change="change"/>
      </div>
    </div>
    <div class="fl info" v-if="this.status===false">
      <div class="info_list">
        <div class="info_list_title">{{currentHu}} 所有户籍人口</div>
        <div class="header">
          <div class="info_list_content" v-if="this.currentHu!==''">
            <div :class="{clickPerson:(changePerson === index)}" class="fl person mr10"
                 v-for="(item, index) in person"
                 :key="index" @click="clickPerson(item, index)">
              {{item.name}} (户籍人口) <br>
              {{item.cardno}}
            </div>
          </div>
        </div>
      </div>

      <div class="content">
        <div class="info_list_title" v-if="currentPerson !== ''">个人信息表</div>
        <div class="wk">
          <div class="img1 b_top_left">
            <img class="img2" :src="currentPerson.photo">
          </div>
          <div class="w90 b_top_left td1">姓名</div>
          <div class="w165 b_top_left ti">{{currentPerson.name}}</div>
          <div class="w90 b_top_left td1">性别</div>
          <div class="w105 b_top_left ti">{{currentPerson.sex}}</div>
          <div class="w90 b_top_left td1">民族</div>
          <div class="w135 b_bottom ti">{{currentPerson.folk}}</div>
          <div class="w90 b_bottom_right td1">身份证号</div>
          <div class="w165 b_bottom_right ti">{{currentPerson.cardno}}</div>
          <div class="w90 b_top_left td1">房屋属性</div>
          <div class="w105 b_top_left ti"></div>
          <div class="w90 b_bottom_right td1">居住情况</div>
          <div class="w135 b_bottom ti">{{currentPerson.living_condition}}</div>
          <div class="w90 b_bottom_right td1">住址</div>
          <div class="w585 b_bottom ti">{{currentPerson.address}}</div>
          <div class="w90 b_bottom_right td1">户籍地址</div>
          <div class="w585 b_bottom ti">{{currentPerson.domicile_address}}</div>
          <div class="w135 b_bottom_right td1">手机号码</div>
          <div class="w190 b_bottom_right ti">{{currentPerson.mobile}}</div>
          <div class="w90 b_bottom_right td1">现住地址</div>
          <div class="w395 b_bottom ti">{{currentPerson.present_address}}</div>
          <div class="w135 b_bottom_right td1">共同居住人员</div>
          <div class="w190 b_bottom_right ti">{{currentPerson.co_resident}}</div>
          <div class="w90 b_bottom_right td1">个人年收入</div>
          <div class="w105 b_bottom_right ti">{{currentPerson.personal_income}}</div>
          <div class="w120 b_bottom_right td1">工作单位</div>
          <div class="w170 b_bottom ti">{{currentPerson.work_unit}}</div>
          <div class="w135 b_bottom_right td1">文化程度</div>
          <div class="w190 b_bottom_right ti">{{currentPerson.education}}</div>
          <div class="w90 b_bottom_right td1">婚姻状况</div>
          <div class="w105 b_bottom_right ti">{{currentPerson.marriage}}</div>
          <div class="w120 b_bottom_right td1">生育子女</div>
          <div class="w170 b_bottom ti">{{currentPerson.child}}</div>
          <div class="w135 b_bottom_right td1">政治面貌</div>
          <div class="w190 b_bottom_right ti">{{currentPerson.political_outlook}}</div>
          <div class="w90 b_bottom_right td1">兵役情况</div>
          <div class="w105 b_bottom_right ti">{{currentPerson.military}}</div>
          <div class="w120 b_bottom_right td1">职业</div>
          <div class="w170 b_bottom ti">{{currentPerson.occupation}}</div>
          <!--<div class="w135 b_bottom_right td1">文化程度</div>
          <div class="w90 b_bottom_right ti">{{currentPerson.education}}</div>
          <div class="w100 b_bottom_right td1">婚姻状况</div>
          <div class="w65 b_bottom_right ti">{{currentPerson.marriage}}</div>
          <div class="w80 b_bottom_right td1">生育子女</div>
          <div class="w75 b_bottom_right ti">{{currentPerson.child}}</div>
          <div class="w95 b_bottom_right td1">政治面貌</div>
          <div class="w170 b_bottom ti">{{currentPerson.political_outlook}}</div>
          <div class="w135 b_bottom_right td1">兵役情况</div>
          <div class="w190 b_bottom_right ti">{{currentPerson.military}}</div>
          <div class="w90 b_bottom_right td1">职业</div>
          <div class="w395 b_bottom ti">{{currentPerson.occupation}}</div>-->
          <div class="w135 b_bottom_right td1">重点人群</div>
          <div class="w675 b_bottom ti">{{currentPerson.focus_group}}</div>
          <!--<div class="img1 b_top_left">
            <img class="img2" :src="currentPerson.photo">
          </div>
          <div class="w90 b_top_left td1">姓名</div>
          <div class="w135 b_top_left ti">{{currentPerson.name}}</div>
          <div class="w90 b_top_left td1">性别</div>
          <div class="w135 b_top_left ti">{{currentPerson.sex}}</div>
          <div class="w90 b_top_left td1">民族</div>
          <div class="w135 b_bottom ti">{{currentPerson.folk}}</div>
          <div class="w90 b_bottom_right td1">身份证号</div>
          <div class="w360 b_bottom_right ti">{{currentPerson.cardno}}</div>
          <div class="w90 b_bottom_right td1">政治面貌</div>
          <div class="w135 b_bottom ti">{{currentPerson.political_outlook}}</div>
          <div class="w90 b_bottom_right td1">出生日期</div>
          <div class="w360 b_bottom_right ti">{{currentPerson.birthday}}</div>
          <div class="w90 b_bottom_right td1">居住状态</div>
          <div class="w135 b_bottom ti">{{currentPerson.living_condition}}</div>
          <div class="w90 b_bottom_right td1">住址</div>
          <div class="w585 b_bottom ti">{{currentPerson.address}}</div>
          <div class="w135 b_bottom_right td1">手机号码</div>
          <div class="w190 b_bottom_right ti">{{currentPerson.mobile}}</div>
          <div class="w90 b_bottom_right td1">籍贯</div>
          <div class="w395 b_bottom ti">{{currentPerson.domicile_address}}</div>-->
          <div class="w135 b_right td1">备注</div>
          <div class="w675 ti">{{currentPerson.remarks}}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import './index.less'
import nophoto from '@/assets/images/nophoto.jpeg'
import { auditmailfloor_userlist, auditmailfloor_userbyunitidlist } from '@/api/eventlist'

export default {

  name: 'building',

  data () {
    return {
      nophoto,
      changeDanyuan: 0,
      changeHu_i: '',
      changeHu_j: '',
      changePerson: '',
      danyuan: 0,
      currentDanyuan: '',
      currentHu: '',
      currentPerson: {},
      floordata: this.fdata,
      other_info: this.other,
      person: [],
      status: true, // 右侧户列表显示状态
      loading: false,
      columns: [
        { title: '序号', type: 'index', align: 'center' },
        { title: '姓名', key: 'name', align: 'center' },
        { title: '重点人群',
          key: 'focus_group',
          align: 'center',
          render: (h, params) => {
            // console.log(params.row.focus_group)
            let val = params.row.focus_group
            if (val === undefined) {
              val = '否'
            }
            return h('span', val)
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.info(params.row)
                  }
                }
              }, '详情')
            )
            return h('div', temp)
          }
        }
      ],
      datalist: [],
      totalnum: 0,
      currentPageNo: 1,
      currentPageSize: 8,
      currentID: '', // 单元临时ID
      defaultStyle: false// 默认显示样式状态
    }
  },

  props: {
    fdata: {
      type: Array,
      default: function () {
        return []
      }
    },
    other: {
      type: Array,
      default: function () {
        return []
      }
    }
  },

  components: {},

  computed: {},

  methods: {
    init () {
      if (this.floordata.length > 0) {
        this.currentDanyuan = this.floordata[0].title
      }
      // console.log('组件数据', this.floordata)
      // console.log('组件参考值', this.other_info)
      // 单元
      for (let i = 0; i < this.floordata.length; i++) {
        if (parseInt(this.other_info[0]) === parseInt(this.floordata[i].id)) {
          // console.log('当前单元', i)
          this.changeDanyuan = i
          this.reDanyuan(i)
          break
        }
      }
      // 层
      for (let j = 0; j < this.floordata[this.danyuan].list.length; j++) {
        if (parseInt(this.other_info[1]) === parseInt(this.floordata[this.danyuan].list[j].id)) {
          this.changeHu_i = j
          break
        }
      }
      // 户
      if (this.changeHu_i !== '') {
        for (let k = 0; k < this.floordata[this.danyuan].list[this.changeHu_i].list.length; k++) {
          if (parseInt(this.other_info[2]) === parseInt(this.floordata[this.danyuan].list[this.changeHu_i].list[k].id)) {
            this.changeHu_j = k
            // console.log('当前户', k)
            this.clickHu(this.changeHu_i, this.changeHu_j)
            break
          }
        }
      }
      // console.log('单元', this.changeDanyuan, '--户', this.changeHu_i, '--层', this.changeHu_j, '--人', this.changePerson)
    },
    // 刷新单元
    reDanyuan (index) {
      this.danyuan = index
      this.person = []
      this.currentHu = ''
      this.currentPerson = {}
      this.changeHu_i = ''
      this.changeHu_j = ''
      this.changeDanyuan = index
    },
    clickDanyuan (index) {
      // console.log('当前单元index', index)
      this.reDanyuan(index)
      // console.log(this.changeDanyuan)
      this.currentID = this.floordata[this.danyuan].id
      this.currentDanyuan = this.floordata[this.danyuan].title
      // console.log('当前点击单元：', this.currentDanyuan)
      this.status = true
      this.unitList(this.currentID)
    },

    clickHu (i, j) {
      // console.log(this.floordata[this.danyuan].list[i].list[j].title)
      this.currentHu = this.floordata[this.danyuan].list[i].list[j].title
      this.huInfo(this.floordata[this.danyuan].list[i].list[j].id)
      this.currentPerson = {}
      this.changeHu_i = i
      this.changeHu_j = j
      this.changePerson = ''
      this.status = false
      // console.log(this.changeHu_i, '---', this.changeHu_j)
    },

    clickPerson (item, index) {
      // console.log(item)
      this.currentPerson = item
      this.changePerson = index
      // console.log(this.changePerson)
    },

    async huInfo (param) {
      const data = {
        final_id: param
      }
      let res = await auditmailfloor_userlist(data)
      if (res.data.errcode === 0) {
        this.person = res.data.data
        // console.log('当前person数组：', this.person)
        // 人
        for (let i = 0; i < this.person.length; i++) {
          // console.log(this.changePerson, '==', this.other_info[3], '==', this.person[i].id)
          if (this.other_info[3] === this.person[i].id) {
            this.changePerson = i
            this.clickPerson(this.person[i], i)
            break
          } else {
            this.changePerson = 0
            this.clickPerson(this.person[0], 0)
          }
        }
      } else {
        this.$Notice.error({
          title: '获取户信息失败',
          desc: res.data.errmsg
        })
      }
    },
    // 根据单元查户列表
    unitList (param) {
      const data = {
        id: param,
        pageNo: this.currentPageNo,
        pageSize: this.currentPageSize
      }
      this.loading = true
      auditmailfloor_userbyunitidlist(data).then(res => {
        if (res.data.errcode === 0) {
          this.loading = false
          this.datalist = res.data.data.results
          // console.log(this.datalist)
          this.totalnum = res.data.data.totalRecord
          // console.log('当前表格数据', this.datalist)
        } else {
          this.$Notice.error({
            title: '获取户列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    // 户列表点击详情(废弃)
    // info (item) {
    //   const str = item.ids
    //   const arr = str.split('-')
    //   let a = arr.slice(0)
    //   a.unshift(this.currentID)
    //   this.other_info = a
    //   this.status = false
    //   this.init()
    // },
    // 点人列表
    clickPersonList (item, index) {
      this.currentPerson = item
      this.changePerson = index
      const str = item.ids
      const arr = str.split('-')
      let a = arr.slice(0)
      a.unshift(this.currentID)
      this.other_info = a
      this.status = false
      this.init()
    },
    // 户列表分页改变事件
    change (pageNo) {
      this.currentPageNo = pageNo
      if (this.currentID !== undefined) {
        this.unitList(this.currentID)
      }
    }
  },
  watch: {},

  mounted () {
    this.init()
    this.currentID = this.floordata[0].id
    if (this.currentID !== undefined) {
      this.unitList(this.currentID)
    }
  }

}
</script>

<style scoped>

  /deep/ ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: rgba(255,255,255,0.93);
  }

  /deep/ ::-webkit-scrollbar-thumb {
    border-radius:5px;
    -webkit-box-shadow: inset 0 0 6px rgba(250, 250, 250, .3);
    background-color: rgba(220,220,220,0.93);
  }

  /deep/ ::-webkit-scrollbar-corner {
    background-color: rgba(255,255,255,0.93);
  }

  .danyuan {
    height: 75px;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    background-color: #fff;
  }

  .danyuan div {
    width: 80px;
    height: 40px;
    margin-top: 13px;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 18px;
    line-height: 20px;
    background-color: #F3F4F6;
    color: #939393;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
  }

  /*改变后单元样式*/
  .clickDanyuan {
    background-color: #FFF0D3 !important;
    color: #EB9F15 !important;
  }

  .clickHu {
    background-color: #FFF0D3 !important;
    color: #EB9F15 !important;
  }

  .clickPerson {
    background-color: #EBF1FD !important;
    color: #5772E8 !important;
  }

  .lou {
    height: 550px;
    overflow-y: auto
  }

  .ceng {
    width: 60px;
    height: 50px;
    text-align: center;
    border-radius: 15px;
    background-color: #D5E4FC;
    font-size: 20px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    color: #5571E6;
    margin: auto;
    top: 0;
    left: 10px;
    bottom: 0;
    line-height: 30px;
    position: absolute;
  }

  .hu {
    width: 85px;
    height: 50px;
    text-align: center;
    /*border: 1px solid #000;*/
    background-color: #F3F4F6;
    cursor: pointer;
    margin-bottom: 5px;
    line-height: 30px;
    color: #939393;
    font-weight: bold;
  }

  .hulist {
    margin-left: 75px;
    width: 300px;
  }

  .person {
    width: 200px;
    background-color: #F3F4F6;
    height: 60px;
    text-align: center;
    padding-top: 5px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .personlist {
    height: 630px;
    background-color: #fff;
    margin: 10px 0px;
  }

  .info {
    width: 850px;
  }

  .info_list {
    width: 850px;
    height: 120px;
    padding: 10px;
    background-color: #fff;
  }

  .info_list_title {
    width: 800px;
    height: 20px;
    line-height: 20px;
    font-size: large;
    margin-bottom: 10px;
  }

  .header {
    height: 80px;
    width: 830px;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .info_list_content {
    display: flex;
  }

  .fl {
    float: left;
    padding: 10px;
  }

  .text-center {
    text-align: center;
  }

  .ml10 {
    margin-left: 10px;
  }

  .mr10 {
    margin-right: 10px;
  }

  .mr5 {
    margin-right: 5px;
  }

  .mt5 {
    margin-top: 5px;
  }

  .mt10 {
    margin-top: 10px;
  }

  .ml15 {
    margin-left: 15px;
  }

  .content {
    height: 500px;
    width: 850px;
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
  }

  .page_style {
    margin-top: 10px;
    position: relative;
  }
</style>
